<script setup lang="tsx">
import {chatOrderApi, MyOrderResponse} from "@/api/chat_order";
import {DataTableColumns, NButton, useMessage, NSpace, NPopconfirm} from 'naive-ui'
import {ref} from "vue";

let msg = useMessage();

interface Props {
	myOrdersShow: boolean
}

interface Emit {
	(e: 'update:myOrdersShow', myOrdersShow: boolean): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emit>()
const myOrdersShow = computed({
	get: () => props.myOrdersShow,
	set: (myOrdersShow: boolean) => emit('update:myOrdersShow', myOrdersShow),
})

const tableData = ref<Array<MyOrderResponse>>()
const pagination = reactive({
	page: 1,
	pageSize: 8,
	itemCount: 0,
})

// 获取我的订单信息
const getMyOrders = async () => {
	try {
		const {
			records,
			totalRow
		} = await chatOrderApi.pageMyOrders({
			pageNum: pagination.page,
			pageSize: pagination.pageSize
		})
		tableData.value = records
		pagination.itemCount = +totalRow
	} catch (e: any) {
		msg.error(e.message)
	}
}

const pageNumChange = (pageNum: number) => {
	pagination.page = pageNum
	getMyOrders()
}
const pageSizeChange = (pageSize: number) => {
	pagination.pageSize = pageSize
	getMyOrders()
}

const closeMyOrders = () => {
	pagination.page = 1
	pagination.pageSize = 8
}

const createColumns = ({
												 toPay,
												 toClose
											 }: {
	toPay: (rowData: MyOrderResponse) => void,
	toClose: (rowData: MyOrderResponse) => void,
}): DataTableColumns<MyOrderResponse> => {
	return [
		// todo
		// {
		// 	type: 'expand',
		// 	// expandable: (rowData) => rowData.name !== 'Jim Green',
		// 	renderExpand: (rowData) => {
		// 		return `${rowData.orderId} is a good guy.`
		// 	}
		// },
		{
			title: '订单号',
			key: 'orderId',
			width: 80,
		},
		{
			title: '总金额',
			key: 'totalAmount',
			width: 50,
			render: row => {
				return `¥ ${row.totalAmount}`
			}
		},
		{
			title: '订单状态',
			key: 'orderStatus',
			width: 50,
			render: row => {
				// 订单状态(0:待付款 1:待确认 2:已完成 3:无效订单 4:已关闭
				switch (row.orderStatus) {
					case 0:
						return '待付款'
					case 1:
						return '待确认'
					case 2:
						return '已完成'
					case 3:
						return '无效订单'
					case 4:
						return '已关闭'
					default:
						return ''
				}
			}
		},
		{
			title: '操作',
			key: 'actions',
			width: 50,
			render(row) {
				if (row.orderStatus == 1 || row.orderStatus == 0) {
					return (
						<NSpace>
							<NButton size={'small'} onClick={() => {
								toPay(row)
							}}
							>
								去支付
							</NButton>
							<NPopconfirm onPositiveClick={() => {
								toClose(row)
							}}
							>
								{{
									default: () => '确认关闭',
									trigger: () => <NButton size={'small'}>关闭</NButton>
								}}
							</NPopconfirm>
						</NSpace>
					);
				}
			}
		}
	]
}

// 去下单
const userChargeShow = ref(false)
const userChargeModalRef = ref()
const orderNo = ref<string>('')
const columns = ref(createColumns({
	// 去支付
	async toPay(row) {
		orderNo.value = row.orderId
		myOrdersShow.value = false
		userChargeShow.value = true
		// 调用子组件中的获取支付链接的方法
		await nextTick(() => {
			userChargeModalRef.value.getPayUrl()
		})
	},
	// 去关闭
	toClose(row) {
		chatOrderApi.closeMyOrder(row.orderId).then(() => {
			msg.success("关闭成功")
			getMyOrders()
		}).catch((err: any) => {
			msg.error(err.message)
		})
	}
}))

// 暴露给父组件
defineExpose({getMyOrders})
</script>

<template>
	<NModal v-model:show="myOrdersShow" style="width: 90%; max-width: 900px;" preset="card"
					:on-after-leave="closeMyOrders"
					title="我的订单"
	>
		<n-data-table
			:columns="columns"
			:data="tableData"
			:bordered="false"
		/>
		<n-pagination style="float: right;margin-top: 10px"
									:page="pagination.page"
									:page-size="pagination.pageSize"
									:item-count="pagination.itemCount"
									show-size-picker
									:on-update:page="pageNumChange"
									:on-update:page-size="pageSizeChange"
									:page-sizes="[8, 16]"
		/>
	</NModal>
	<UserCharge v-model:userChargeShow="userChargeShow" v-model:orderNo="orderNo" ref="userChargeModalRef"/>
</template>
